<template>
  <div class="deploy-list">
    <div>
      <Button type="primary" @click="addDeploy()">新增环境</Button>
    </div>
    <div>
      <Table class="deploy-content" :columns="columns7" :data="deployData">
        <template slot-scope="{ row }" slot="createdDate">
          <span>{{formatDateByStringMatch(row.createdDate, 'yyyy-MM-dd HH:mm:ss')}}</span>
        </template>
        <template slot-scope="{ row }" slot="lastModifiedDate">
          <span>{{formatDateByStringMatch(row.lastModifiedDate, 'yyyy-MM-dd HH:mm:ss')}}</span>
        </template>
        <template slot-scope="{ row }" slot="action">
          <div class="table-form-action-box">
            <span class="table-blue action-btn" style="margin-right: 10px;" @click="toEdit(row)">编辑</span>
            <span class="table-red" @click="toDel(row)">删除</span>
          </div>
        </template>
      </Table>
      <Page
        style="margin-bottom: 10px;"
        v-show="pagination.total > pagination.pageSize || pagination.pageSize > 10"
        @on-change="changePageNum"
        @on-page-size-change="changePageSize"
        :total="pagination.total"
        :current="pagination.current"
        :page-size="pagination.pageSize"
        :transfer="true"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
import { getDeployList, delApplication } from 'http/api/deploy';
import { formatDateByStringMatch } from 'assets/scripts/common';
export default {
  name: 'deployList',
  data () {
    return {
      appId: '',
      operationTpye: 0,
      pagination: {
        total: 10,
        current: 1,
        pageSize: 10
      },
      columns7: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '创建人',
          key: 'createdBy'
        },
        {
          title: '创建时间',
          key: 'createdDate',
          slot: 'createdDate'
        },
        {
          title: '修改人',
          key: 'lastModifiedBy'
        },
        {
          title: '修改时间',
          key: 'lastModifiedDate',
          slot: 'lastModifiedDate'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          slot: 'action'
        }
      ],
      deployData: [],
      formatDateByStringMatch: formatDateByStringMatch
    };
  },

  methods: {
    viewVersion (row) {
      this.$router.push({ path: '/home/application/appVersion?id=' + row.id });
    },
    addDeploy () {
      this.$router.push({ path: '/home/deploy/createDeploy' });
    },
    // 应用详情
    toEdit (row) {
      console.log(row)
      this.modalShow = true;
      this.operationTpye = 1;
      this.appId = row.id;
    },
    // 删除应用
    toDel (row) {
      this.$Modal.confirm({
        title: '确认要删除吗',
        content: '<p>数据删除后不可恢复</p>',
        onOk: async () => {
          await delApplication(row.id);
          this.getList();
        }
      });
    },
    changePageNum (pageNum) {
      this.pagination.current = pageNum;
      this.getList();
    },
    changePageSize (size) {
      this.pagination.pageSize = size;
      this.changePageNum(1);
    },
    getList () {
      let param = {
        page: this.pagination.current,
        size: this.pagination.pageSize
      };
      getDeployList(param).then(res => {
        if (res) {
          this.deployData = res.items;
          this.pagination.total = res.total;
        }
      })
        .catch(err => {
          this.$Message.error(err);
        })
    }
  },
  mounted () {
    this.getList();
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.deploy-list {
  padding: 20px;
  .deploy-content {
    margin: 20px 0;
  }
}
</style>

<style lang="less">
</style>
